import React from 'react'
import {Input,DatePicker, Space,Table,message} from "antd";
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { Button} from 'antd';
import './management.css'
import axios from 'axios'


const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';



class Selling extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            total: 0,
            loading: true,
            pageNum: 1,
            pageSize: 5,
            data1:[],
            data:[],
            shopNameValue:"",
            shopIdValue:"",
            time1:'',
            time2:''
        }
    }


    componentDidMount(){
        let userName = "shop01"
        axios.post('/api/backstage/shop/findAllGoods2?userName='+userName).then((res)=>{
            let list = []
            for (let i = 0; i < res.data.data.length; i++) {
                list.push(
                    {
                        key: res.data.data[i].goodsId,
                        goodsId: res.data.data[i].goodsId,
                        goodsName: res.data.data[i].goodsName,
                        goodsSize: res.data.data[i].goodsSize,
                        goodsColor:res.data.data[i].goodsColor,
                        goodsRealPrice:res.data.data[i].goodsRealPrice,
                        goodsNumber:res.data.data[i].goodsNumber,
                        goodsSellNumber:res.data.data[i].goodsSellNumber,
                        goodsLaunchTime:res.data.data[i].goodsLaunchTime
                    }
                );
            }
            this.setState({
                data:list,
                data1:res.data.data
            })
            // console.log(this.state.data1)
        })
    }

    changePage(current){
        //current参数表示是点击当前的页码，
        // this.getData(current) //向后端发送请求
        console.log(current)
    }
    publish = () =>{
        this.props.history.push('./publish')
    }

    // 获取表单的值
    shopName = (e) => {
        this.setState({shopNameValue:e.target.value})
    }
    shopId = (e) => {
        this.setState({shopIdValue:e.target.value})
    }

    // 重置
    clear = () => {
        this.setState({
            shopNameValue:"",
            shopIdValue:"",
            time1:"",
            time2:""
        })
        this.setState({
            data:this.state.data1
        })
    }

    // 点击查询
    search = () => {

        let listData = this.state.data.filter(item=>{
            return item.goodsName.toString().indexOf(this.state.shopNameValue)>-1 &&
                item.goodsId.toString().indexOf(this.state.shopIdValue)>-1
                // && (this.state.time1 < item.goodsLaunchTime)
                // item.goodsId === this.state.shopIdValue
        })
        console.log(1,this.state.time1,this.state.data[0].goodsLaunchTime,2)
        console.log(listData)
        this.setState({data:listData})

    }
    //改变时间
    timeChange=(data,dataString)=>{
        // console.log(data)
        // console.log(dataString)
        this.setState({
            time1:dataString[0],
            time2:dataString[1]
        })
        console.log(this.state.time1,this.state.time2)
    }


    //操作---修改
    change = (a) => {
        // let id = a.goodsId
        this.props.history.push('/publish')
    }

    //操作---查看详情图
    look = (a) => {
        // let imgSrc = a.goodsPic
        // console.log(a)
        // this.props.history.push('/publish')
    }

    //操作---下架
    Off = (a) => {
        let id = a.goodsId
        axios.post("/api/backstage/shop/downGoods?ids="+id,
            {
                headers : {
                    'Content-Type':'application/x-www-form-urlencoded'
                }
            }
        ).then((res)=>{
            console.log(res)
            if (res.data.msg === "下架成功！"){
                console.log(111)
                message.success('下架成功!');
                // 下架成功，重新刷新页面
                this.setState({
                    data:this.state.data1
                })
            }else {
                message.error('下架失败！');
            }
        })
    }
    render (){
        // 表格头
        const columns = [
            {
                title: '商品编号',
                dataIndex: 'goodsId',
            },
            {
                title: '商品名称',
                dataIndex: 'goodsName',
            },
            {
                title: '尺寸',
                dataIndex: 'goodsSize',
            },
            {
                title: '颜色',
                dataIndex: 'goodsColor',
            },
            {
                title: '售价',
                dataIndex: 'goodsRealPrice',
            },
            {
                title: '库存',
                dataIndex: 'goodsNumber',
            },
            {
                title: '总销量（件）',
                dataIndex: 'goodsSellNumber',
            },
            {
                title: '上架时间',
                dataIndex: 'goodsLaunchTime',
            },
            {
                title: '操作',
                render:(text, record, index)=>{
                    return(
                        <div><span onClick={()=>{this.change(record)}}>修改</span>&nbsp;&nbsp;
                            <span onClick={()=>{this.Off(record)}}>下架</span>&nbsp;&nbsp;
                            <span onClick={()=>{this.look(record)}}>查看详情图</span>
                        </div>
                    )
                }
            },
        ];
        const rowSelection = {
            onChange: this.onSelectChange,
        };
        const paginationProps = {
            showQuickJumper: false,
            showTotal: () => `在售${this.state.data.length}款商品`,
            pageSize: this.state.pageSize,
            total: this.state.total,  //数据的总的条数
            onChange: (current) => this.changePage(current), //点击当前页码
        }

        return(
        <div className="div_content">

            {/*搜索*/}
            <div className='search'>
                <div className='div_inp'><span>商品名称：</span>
                    <Input value={this.state.shopNameValue} placeholder="请输入商品名称" onChange={this.shopName}/>
                </div>
                <div className='div_inp'><span>商品编号：</span>
                    <Input value={this.state.shopIdValue} placeholder="请输入商品编号" onChange={this.shopId}/>
                </div>
                <div className='div_inp3'><span>上架时间：</span>
                    <Space direction="vertical" size={12}>
                        <RangePicker

                            value={[moment(this.state.time1 === ''?new  Date().toLocaleString():this.state.time1 , dateFormat), moment(this.state.time2 === ''?new  Date().toLocaleString():this.state.time2, dateFormat)]}
                            onChange={this.timeChange}
                            format={dateFormat} locale={locale}
                        />
                    </Space>
                </div>
                <div className="div_btn search_btn">
                    <Button type="primary" onClick={this.search}>查询</Button>
                    <Button  onClick={this.clear}>重置</Button>
                </div>
            </div>

            {/*表格*/}
            <div>
                <div className="div_btn2">
                    <Button type="primary" onClick={this.publish}>发布商品</Button>
                    <Button >批量下架</Button>
                </div>
                <Table rowSelection={rowSelection}  columns={columns} dataSource={this.state.data} key={this.state.data.key} pagination={paginationProps}/>
            </div>
        </div>
        )
    }
}

export default Selling